<%--
  Created by IntelliJ IDEA.
  User: 13083
  Date: 2019/6/29
  Time: 9:29
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>个人</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!-- Mobile Web-app fullscreen -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">

    <!-- Meta tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="favicon.ico">

    <!--Title-->
    <title>地址管理</title>

    <!--CSS styles-->
    <link rel="stylesheet" media="all" href="${pageContext.request.contextPath }/css/bootstrap.css" />
    <link rel="stylesheet" media="all" href="${pageContext.request.contextPath }/css/animate.css" />
    <link rel="stylesheet" media="all" href="${pageContext.request.contextPath }/css/font-awesome.css" />
    <link rel="stylesheet" media="all" href="${pageContext.request.contextPath }/css/furniture-icons.css" />
    <link rel="stylesheet" media="all" href="${pageContext.request.contextPath }/css/linear-icons.css" />
    <link rel="stylesheet" media="all" href="${pageContext.request.contextPath }/css/magnific-popup.css" />
    <link rel="stylesheet" media="all" href="${pageContext.request.contextPath }/css/owl.carousel.css" />
    <link rel="stylesheet" media="all" href="${pageContext.request.contextPath }/css/ion-range-slider.css" />
    <link rel="stylesheet" media="all" href="${pageContext.request.contextPath }/css/theme.css" />

    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/head.css" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/footer.css" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/suercenter.css" />
    <link rel="stylesheet" media="all" href="${pageContext.request.contextPath }/css/gerenzhongxin.css" />
    <!--Google fonts-->
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600&amp;subset=latin-ext" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

  <%--  <script src="js/test.js"></script>--%>
</head>
<body>
<div class="ur_right" style="margin-left: 5%;width: 800px;margin-right: 5%;margin-bottom: 2%">
    <!--uer_top-->

    <!--uer_top-->
    <div class="o_o_part" style="width: 100%" id="xz">
        <div class="part_h2">新增收货地址</div>
        <div id="tianjiadizhi">
        <form action="${pageContext.request.contextPath }/AddressServlet" method="post" id="form_dizhi" target="iframe">
            <input type="hidden" name="method"  value="insert">
            <ul style="margin-left: 250px">
                <li style="display:inline-block;width:200px;text-align:left;">
                    <div class="row form-group" style="width: 400px">
                        <div class="col-md-12">
                            <label for="shr">收货人</label> <span class='red' id="addresseespan"></span><br />
                            <input type="phone" id="shr" class="form-control" name="addressee" value="" placeholder="收货人" autocomplete="off">
                        </div>
                    </div>
                </li>
                <br>

                <li style="display:inline-block;width:200px;text-align:left;">
                    <div class="row form-group" style="width: 400px">
                        <div class="col-md-12">
                            <label for="sjhm">手机号码</label><span class='red' id="phonespan0"></span><br />
                            <input type="text" id="sjhm" class="form-control" name="phone" value=""  placeholder="手机号码" autocomplete="off" tabindex="1" maxlength="11">
                        </div>
                    </div>
                </li>
                <br>
                <li style="display:inline-block;width:200px;text-align:left;">
                    <div class="row form-group" style="width: 400px">
                        <div class="col-md-12">
                            <label for="dzxx">地址</label><span class='red' id="addressspan"></span><br />
                            <input type="text" id="dzxx" class="form-control" name="address" value=""  placeholder="地址" autocomplete="off">
                        </div>
                    </div>
                </li>
                <br>
                <li style="display: inline-block;width:200px">
                    <div class="row form-group" id="tianjiadz" >
                        <div class="col-md-12"  id="tianjiadz-1"  style="margin-left: 45%" >
                            <input id="tijiao" type="button" class="btn btn-primary" value="添加" style="margin-left: 75px;width: 100px">
                        </div>
                       <%-- <div class="col-md-12" id="tianjiadz-2">
                            <input id="qxtj" type="button" class="btn btn-primary" value="取消" style="margin-left: 135px;width: 100px">
                        </div>--%>
                    </div>
                </li>
            </ul>
        </form>
        </div>
        <div>

        </div>
    </div>
    <!--pathend-->
    <div class="addr_list">
        <div class="addr_l_h2">
            已保存收货地址
        </div>
        <br>
        <table class="order_table">
            <thead class="theads">
            <tr>
                <td style="padding-left: 40px;">收货人</td>
                <td>收货人地址</td>
                <td>手机</td>
                <td>操作</td>
            </tr>

            </thead>
            <tbody>
            <c:forEach items="${userAddress}" var="m">
                <tr >

                    <td>${m.addressee}</td>&nbsp;&nbsp;&nbsp;&nbsp;
                    <td>${m.address}</td>&nbsp;&nbsp;&nbsp;&nbsp;
                    <td>${m.phone}</td>
                    <td>
                        <br>
                        <a href="${pageContext.request.contextPath}/AddressServlet?method=delete&ID=${m.ID}" style="color: black">删除</a>
                        <br>
                        <a href="${pageContext.request.contextPath}/AddressServlet?method=find&ID=${m.ID}" id="xiugai" class="btn-default">修改</a>
                        <br>
                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
    </div>
</div>
</div>


<script>
    $(function ()
    {
     $('#tianjia').click(function ()
     {
        $('#tianjiadizhi').css('display','');
      /*  $('#xianyoudizhi').css('display','none');*/
     })

    })
</script>
<script type="text/javascript">
    /*获得当前路径*/
//声明三个变量
    var validate={

        phone0_form:false,
        address_form:false,
        addressee_form:false


    };

    /*校验字符串长度*/
    function checkLength(str,min,max){
        if(str.length < min || str.length > max){
            return true;
        }else{
            return false;
            //$('#userspan').html('');
        }
    }


//检测收货人是否为空
    function checkshr()
    {
        var  shr=$('#shr').val();
        if (shr=="")
        {
            $('#addresseespan').html('收货人不能为空！');
            validate.addressee_form=false;
            $('#addresseespan').css('color','red');
            return false;
        }else{
            $('#addresseespan').html(' √');
            validate.addressee_form= true;
            $('#addresseespan').color='green';
            return true;
        }
    }


    /*验证电话号码是否合法*/
    function checksjhm()
    {
        var dianhua = $('#sjhm').val();
            if (checkLength(dianhua, 11, 11)) {
                $('#phonespan0').html('该手机号码不合法');
                validate.phone0_form = false;
                $('#phonespan0').css('color','red');
                return false;
            } else {
                $('#phonespan0').html(' √good');
                validate.phone0_form = true;
                $('#phonespan0').css('color', 'green');
                return true;
            }

        /*}*/
         /**/  /* })
        },"json")*/
    }
    //检测地址是否为空
    function checkdz()
    {
        var  dz=$('#dzxx').val();
        if (dz=="")
        {
            $('#addressspan').html('地址不能为空！');
            validate.address_form=false;
            $('#addressspan').css('color','red');
            return false;
        }else{
            $('#addressspan').html(' √ good');
            validate.address_form = true;
            $('#addressspan').css('color','green');
            return true;
        }
    }

    /**
     * 下面三 句为 当输入框发生变化时
     */
    $('#shr').change(checkshr);
    $('#sjhm').change(checksjhm);
    $('#dzxx').change(checkdz);

    /*注册按钮点击*/
    $('#tijiao').click(function ()
        {

            var isokm = validate.addressee_form & validate.phone0_form & validate.address_form ;
            if (isokm)
            {
                $('#form_dizhi').submit();
              /*  $('#xianyoudizhi').css('display','');
                $('#tianjiadizhi').css('display','none');*/

            }
            else
            {
                alert("提交失败!");
                return false;
            }
        }
    )


</script>

<script src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath }/js/jquery.bootstrap.js"></script>
<script src="${pageContext.request.contextPath }/js/jquery.magnific-popup.js"></script>
<script src="${pageContext.request.contextPath }/js/jquery.owl.carousel.js"></script>
<script src="${pageContext.request.contextPath }/js/jquery.ion.rangeSlider.js"></script>
<script src="${pageContext.request.contextPath }/js/jquery.isotope.pkgd.js"></script>
<script src="${pageContext.request.contextPath }/js/main.js"></script>
</body>

</html>
